<template>
    <div>
      <h2>添加商品</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/AdminMain/AdminHome">主页</el-breadcrumb-item>
        <el-breadcrumb-item to="/AdminMain/GoodsManager">商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card style="margin-top: 20px;">
        <el-form :model="form" label-width="100px">
          <el-form-item label="商品名称">
            <el-input v-model="form.goodsName" placeholder="请输入商品名称" />
          </el-form-item>
  
          <el-form-item label="商品价格">
            <el-input v-model="form.goodsPrice" placeholder="请输入价格" type="number" />
          </el-form-item>
  
          <el-form-item label="商品类型">
            <el-input v-model="form.goodsType" placeholder="请输入类型" />
          </el-form-item>
  
          <el-form-item label="商品图片">
            <el-upload
              class="avatar-uploader"
              action="/file/uploadImage"
              name="file"
              :show-file-list="false"
              :on-success="handleUploadSuccess"
              :before-upload="beforeUpload"
            >
              <el-button type="primary">上传图片</el-button>
            </el-upload>
            <div v-if="form.goodsImage" style="margin-top: 10px;">
              <img :src="form.goodsImage" alt="预览" style="width: 150px; border: 1px solid #ccc; padding: 3px;" />
            </div>
          </el-form-item>
  
          <el-form-item label="商品库存">
            <el-input v-model="form.goodsStock" placeholder="请输入库存数量" type="number" />
          </el-form-item>
  
          <el-form-item>
            <el-button type="success" @click="onSubmit">添加</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  
  const router = useRouter()
  
  const form = ref({
    goodsName: '',
    goodsPrice: '',
    goodsType: '',
    goodsImage: '',
    goodsStock: ''
  })
  
  // 上传成功后
  const handleUploadSuccess = (response) => {
    if (response.code === 200) {
      form.value.goodsImage = response.data
      ElMessage.success('图片上传成功')
    } else {
      ElMessage.error('上传失败: ' + response.message)
    }
  }
  
  // 上传之前检查
  const beforeUpload = (file) => {
    const isImage = file.type.startsWith('image/')
    const isLt2M = file.size / 1024 / 1024 < 2
  
    if (!isImage) {
      ElMessage.error('只能上传图片格式')
      return false
    }
    if (!isLt2M) {
      ElMessage.error('图片大小不能超过2MB')
      return false
    }
    return true
  }
  
  const onSubmit = () => {
    if (!form.value.goodsName || !form.value.goodsPrice || !form.value.goodsType || !form.value.goodsImage || !form.value.goodsStock) {
      ElMessage.error('请填写完整信息')
      return
    }
  
    axios.post('/goods/add', form.value)
      .then(response => {
        if (response.data.code === 200) {
          ElMessage.success('商品添加成功')
          router.push('/AdminMain/GoodsManager')
        } else {
          ElMessage.error('添加失败: ' + response.data.message)
        }
      })
      .catch(() => {
        ElMessage.error('请求出错，添加失败')
      })
  }
  
  const onCancel = () => {
    router.push('/AdminMain/GoodsManager')
  }
  </script>
  
  <style scoped>
  .avatar-uploader {
    display: inline-block;
  }
  </style>
  